<template>
  <div class="information">
    <div style="background-color: #fff;">
      <el-input
        v-model="input3"
        style="width: 240px;margin: 10px;"
        placeholder="请输入员工名称查询"
        :suffix-icon="Search"
      />
      <el-button plain @click="query">查询</el-button>
      <el-button plain @click="reset">重置</el-button>

    </div>
    <el-table :data="tableData" ref="tableRef" style="width: 100%;">
      <el-table-column align="center" fixed prop="customerName" label="客户姓名"/>
      <el-table-column align="center" prop="customerId" label="客户电话"/>
      <el-table-column align="center" prop="money" label="总金额"/>
      <el-table-column align="center" prop="Smoney" label="结算金额"/>
      <el-table-column align="center" prop="personnel" label="员工名称"/>
    </el-table>
    <div>
      <el-pagination
        @current-change="currentChange"
        :current-page="pageing.page" 
        :page-size="pageing.size"
        :total="pageing.total"
        style="float: right"
        layout=" prev, pager, next"
       />
    </div>
  </div>
</template>

<script setup name="information">
import { ref,reactive,onMounted,getCurrentInstance,onActivated } from 'vue'
import { ElMessageBox,ElNotification } from 'element-plus'
import { Search } from '@element-plus/icons-vue'
import { commissionList } from "@/api/modules/user";
// el-table支持鼠标横向拖拽滚动
const { proxy } = getCurrentInstance()
const tableRef = ref()
nextTick(() => {
  if (tableRef.value) {
    proxy.$dragTable(tableRef)
  }
})
// 员工信息列表
const tableData = reactive([])
const tableDataed = reactive([])
const input3 = ref('')
const addDialogVisible = ref(false)
const editDialogVisible = ref(false)
// 新增用户存储字段
const pageing = ref({
  total:0,
  page:1,
  size:5,
})
// 选择第几页
const currentChange = (val)=> {
  console.log("翻页，当前为第几页", val);
  tableData.length=0;
  for(let i=0;i<5;i++){
    console.log(tableDataed[(val-1)*5+i]); 
    if(tableDataed[(val-1)*5+i]){
      tableData.push(tableDataed[(val-1)*5+i])
    }
  } 
  pageing.value.page = val;
  console.log(pageing.value.total);
}
onActivated(()=>{
  userFun();
})
// 1.执行获取财务信息接口
const userFun = async()=>{
  const { data } = await commissionList();
  Object.assign(tableDataed,data);
  pageing.value.total = data.length;
  currentChange(1)
}
// 查询
const query = async() =>{
  const { data } = await commissionList({"personnel":input3.value});
  tableDataed.length=0
  Object.assign(tableDataed,data);
  pageing.value.total = data.length;
  currentChange(1)
}
// 重置
const reset = () =>{
  input3.value = "";
  userFun();
}
</script>

<style scoped lang="scss">
@import "./index.scss";
</style>
